<script setup>
import ChartView from '../chart/index.vue'

const bscd = inject('bscd')
const basinList = ref([
  { label: '柳家屯(二)', value: '11200260' }, // 额尔古纳河
  { label: '索伦(五)', value: '11400026' }, // 嫩江中南部
  { label: '大石寨', value: '11400089' }, // 嫩江中南部
  { label: '白云胡硕（四）', value: '11400195' }, // 霍林河内流区
  { label: '巴雅尔吐胡硕', value: '11400241' }, // 霍林河内流区
  { label: '甸子（二）', value: '20106100' }, // 辽河干流水系
  { label: '新井', value: '20115700' }, // 内蒙中部诸河
  { label: '万合永', value: '20208000' }, // 内蒙中部诸河
  { label: '白音他拉', value: '20310500' }, // 辽河干流水系
  { label: '白音卜罗', value: '30100150' }, // 滦河水系
  { label: '大河口（四）', value: '30101900' }, // 滦河水系
  { label: '丰镇（黑三）', value: '30704610' }, // 永定河水系
  { label: '龙头拐（四）', value: '40513605' }, // 黄河干流
  { label: '东园（四）', value: '40515500' } // 黄河干流
])

const chartData = ref({
  streamflow: [],
  tp: [],
  time: []
})
const loading = ref(false)
const handle = async function () {
  loading.value = true
  const params = {
    basin_id: bscd.value
  }
  try {
    const res = await fetch(`/get_gfs_data/?${new URLSearchParams(params)}`, {
      method: 'get'
    }).then(res => res.json())
    chartData.value.streamflow = []
    chartData.value.tp = []
    chartData.value.time = []
    res.forEach((e) => {
      chartData.value.streamflow.push(e.streamflow)
      chartData.value.tp.push(e.tp)
      chartData.value.time.push(e.time)
    })
    loading.value = false
  }
  catch {
    loading.value = false
    ElMessage.error('查询失败')
  }
}
onMounted(() => {
  handle()
})
</script>

<template>
  <div class="flex flex-col h-full px-[8px]">
    <el-form label-width="auto">
      <el-form-item label="流域名称">
        <el-select v-model="bscd" class="!w-[220px]" @change="handle">
          <el-option v-for="e in basinList" :key="e.value" :label="e.label" :value="e.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="flex-1 relative">
      <div class="absolute inset-0">
        <ChartView v-loading="loading" :chart-data="chartData" />
      </div>
    </div>
  </div>
</template>
